<template>
  <div class="container">
    <h1 class="apply-title">活动报名</h1>
    <div class="content">
      <form @submit.prevent="onSubmit" class="from-wrap">
        <div class="input-wrap">
          <input class="input-content clear-input" placeholder="姓名" required id="name" v-model="formText.name">
        </div>
        <div class="input-wrap">
          <input class="input-content clear-input" placeholder="场馆名字" required id="clubname" v-model="formText.clubname">
        </div>
        <div class="input-wrap">
          <select class="select-block clear-select" id="city" v-model="formText.city">
            <option value="常州市" selected>常州市</option>
          </select>
          <i class="iconfont icon-triangle"></i>
        </div>
        <div class="input-wrap">
          <input class="input-content clear-input" placeholder="电话（用于接受获奖通知）" required type="number" v-model="formText.phone">
          <button class="code-btn clear-btn" type="button" :disabled="verifing" v-on:click="getCode" :class="activeColor">{{verifing ? second+'s后重新获取':'获取验证码'}}</button>
        </div>
        <div class="input-wrap">
          <input class="input-content clear-input" placeholder="验证码" required id="code" v-model="formText.verify_code">
        </div>
        <textarea class="text-area" placeholder="瑜伽故事（经营故事或心得）1000字以内" maxlength="1000" required id="sign" v-model="formText.sign"></textarea>
        <h2 class="pic-title">个人生活照（<span class="red-txt">{{fileList.length}}\4</span>）</h2>
        <el-upload class="upload-demo" 
          action="/api/common/file"
          :headers='headers'
          :on-change="handleUserChange"  
          :on-remove="handleUserRemove"
          :before-upload="beforeUserUpload"
          :on-error="uploadErrorHandle"          
          :file-list="fileList" 
          list-type="picture"
          :data="form"
          multiple="multiple"
          :limit='4'>
          <div class="add-area">
            <!-- <div class="title-btn" :class="{'active-txt':txtActive}" @click="chooseCover">封面</div> -->
            <div class="add-btn">
              <div class="add-block"></div>
              <div class="add-block rotate-block"></div>
            </div>
            <el-button class="clear-btn"></el-button>
          </div>
        </el-upload>
        <h2 class="pic-title">场馆照片（<span class="red-txt">{{clubList.length}}\4</span>）</h2>
        <el-upload class="upload-demo" 
          action="/api/common/file"
          :headers='headers'
          :on-change="handleClubChange"  
          :on-remove="handleClubRemove"
          :before-upload="beforeClubUpload"
          :on-error="uploadErrorHandle"
          :file-list="clubList" 
          list-type="picture"
          :data="form"
          multiple="multiple"
          :limit='4'>
          <div class="add-area">
            <!-- <div class="title-btn" :class="{'active-txt':txtActive}" @click="chooseCover">封面</div> -->
            <div class="add-btn">
              <div class="add-block"></div>
              <div class="add-block rotate-block"></div>
            </div>
            <el-button class="clear-btn"></el-button>
          </div>
        </el-upload>
        <button class="clear-btn gradient-btn middle-btn" type="submit" :disabled="submited" :class="bgColor">{{submited ? '已报名':'提交'}}</button>
      </form>
    </div>
    <transition name="fade">
      <div class="pop-wrap" v-show="popShow" transition="fade" @click="hidePop">
        <div class="pop-content">
          <img class="success-img" src="http://piccdn.50yoga.cn/pics/public/sweet/images/shopkeeper/success.png" width="80" height="80">
          <p class="pop-title">报名成功</p>
          <div>
            <span class="pop-title">编号：</span><span class="pop-num">{{applyId}}号</span>
          </div>
          <button class="clear-btn gradient-btn vote-btn" @click="toDetail">确定</button>
        </div>
      </div>
    </transition>
    <v-tabbar></v-tabbar>
  </div>
</template>

<script>
import { post } from '../../common/request'
import tabbar from '@/components/shopkeeper/tabbar.vue'
import { Message } from 'element-ui'

export default {
  name: 'keeperApply',
  data () {
    return {
      headers: {
        'Accept': 'application/vnd.sci.v2+json'
      },
      form: {
        key: ''
      },
      formText: {
        city: '常州市'
      },
      popShow: false,
      txtActive: false,
      fileList: [],
      clubList: [],
      second: 60,
      verifing: false,
      submited: false,
      applyId: ''
    }
  },
  components: {
    'v-tabbar': tabbar
  },
  methods: {
    showPop () {
      this.popShow = true
    },
    hidePop () {
      this.popShow = false
    },
    beforeUserUpload (file) {
    },
    beforeClubUpload (file) {
    },
    uploadErrorHandle () {
      Message.error({
        message: '图片异常，请尝试其它图片'
      })
    },
    handleUserUpOrDel (fileList) {
      let ids = ''
      if (fileList) {
        for (var i = 0; i < fileList.length; i++) {
          var obj = fileList[i].response
          if (obj) {
            if (obj.data) {
              ids += obj.data
              if (i < fileList.length - 1) {
                ids += ','
              }
            }
          }
        }
      }
      // console.log(ids)
      return ids
    },
    handleClubUpOrDel (clubList) {
      let ids = ''
      if (clubList) {
        for (var i = 0; i < clubList.length; i++) {
          var obj = clubList[i].response
          if (obj) {
            if (obj.data) {
              ids += obj.data
              if (i < clubList.length - 1) {
                ids += ','
              }
            }
          }
        }
      }
      return ids
    },
    handleUserChange (file, fileList) {
      this.fileList = fileList
      this.formText.pics = this.handleUserUpOrDel(fileList)
    },
    handleClubChange (file, clubList) {
      this.clubList = clubList
      this.formText.clubpics = this.handleClubUpOrDel(clubList)
    },
    handleUserRemove (file, fileList) {
      this.fileList = fileList
      this.handleUserUpOrDel(fileList)
    },
    handleClubRemove (file, clubList) {
      this.clubList = clubList
      this.handleClubUpOrDel(clubList)
    },
    getCode () {
      if (!this.formText.phone) {
        alert('号码不能为空')
        return
      }
      this.verifing = true
      this.countdown()
      post(`/api/common/code`, {phone: this.formText.phone})
      .then((response) => {
        alert('验证码已发送')
      }, (response) => {
        alert('发送失败')
        this.verifing = false
        this.second = 60
        clearTimeout(this.timer)
      })
    },
    countdown () {
      if (this.second === 0) {
        this.second = 60
        this.verifing = false
      } else {
        this.timer = setTimeout(() => {
          this.second--
          this.countdown()
        }, 1000)
      }
    },
    onSubmit () {
      this.formText.openid = localStorage.openid
      let formText = this.formText
      post(`/api/shield/vote/reg`, formText)
      .then((response) => {
        if (response) {
          this.applyId = response.data
          this.popShow = true
          this.submited = true
        }
      })
    },
    toDetail (e) {
      this.$router.push({
        name: 'keeperDetail',
        params: {id: `${this.applyId}`}
      })
    }
  },
  computed: {
    bgColor () {
      return this.submited ? 'light-pink' : ''
    },
    activeColor () {
      return this.verifing ? '' : 'active-txt'
    }
  }
}
</script>

<style scoped lang="stylus">
$borderRadius = 0.3125rem;
$keeperColor = #f06774;

  .container{
    width 100%
    display flex
    flex-direction column
    align-items center
    }
  .apply-title{
    margin 1.875rem 0
    font-size 1.3125rem
  }
  .content{
    width 84%
    display: flex;
    flex-direction: column;
    padding-bottom 5rem
    .from-wrap{
      display: flex;
      flex-direction: column;
      .input-wrap{
        border 1px solid #8a8a8a
        box-sizing border-box
        height 2.1875rem
        margin-bottom 0.625rem
        border-radius $borderRadius
        display flex
        justify-content space-between
        align-items center
        position relative
        .icon-triangle{
          position absolute
          right 0.625rem
        }
        .select-block{
          outline none
          height 2.06255rem
          font-size 0.9375rem
          flex 1
          margin 0 0.625rem
        }
        .input-content{
          flex 1
          height 1.875rem
          line-height 1.875rem
          font-size 0.9375rem
          margin 0 0.625rem
        }
        .code-btn{
          background-color #ffffff
        }
        .active-txt{
          color $keeperColor
        }
      }
      .text-area{
        width 100%
        height 8.25rem
        border 1px solid #8a8a8a
        box-sizing border-box
        border-radius $borderRadius
        outline none
        font-size 0.9375rem
        padding 0.625rem 
      }
      .pic-title{
        font-size 1rem
        margin 1.25rem 0 0.625rem 0
        .red-txt{
          color $keeperColor
        }
      }
      .add-area{
        width 100%
        height 12.5rem
        border 1px solid #8a8a8a
        box-sizing border-box
        border-radius $borderRadius
        position relative
        .add-btn {
          position absolute
          width w = 3.59375rem
          height h = 3.59375rem
          left 50%
          top 50%
          margin-left -(w/2)
          margin-top -(h/2)
          display flex
          justify-content center
          align-items center
          .add-block{
            position absolute
            width 3.59375rem
            height 0.75rem
            background #eee
          }
          .rotate-block{
            transform rotate(90deg)
          }
        }
        .title-btn{
          position absolute
          width 3.125rem
          height 1.5625rem
          line-height 1.5625rem
          text-align center
          border-radius $borderRadius
          background #8a898a
          color #fff
          right 0.625rem
          bottom 0.625rem
        }
        .active-txt{
          background $keeperColor
        }
        .el-button{
          position absolute
          width 100%
          height 12.5rem
          background rgba(0,0,0,0)
          left 0
        }
      }

      .middle-btn{
        width 14.375rem;
        margin 1.25rem auto;
      }
      .light-pink{
        background #f7cfd5
      }
    }
  }
</style>
